<template>
  <div class="chart-group" ref="out">
    <div class="qpsk-item">
      <div class="qpsk-item-group">
        <div class="chart-box" ref="pieCharts_1"></div>
      </div>
    </div>
    <div class="qpsk-item">
      <div class="qpsk-item-group">
        <div class="chart-box" ref="pieCharts_4"></div>
      </div>
    </div>
    <div class="qpsk-item">
      <div class="qpsk-item-group">
        <div class="chart-box" ref="pieCharts_3"></div>
      </div>
    </div>
    <div class="qpsk-item">
      <div class="qpsk-item-group">
        <div class="chart-box" ref="pieCharts_2"></div>
      </div>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'

let myCharts1 = null
let myCharts2 = null
let myCharts3 = null
let myCharts4 = null
export default {
  name: 'test',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      datas: []
    }
  },
  watch: {
    data(val) {
      if (val.sendName === "message") {
        this.setDatas1(val.data)
      }
      if (val.sendName === 'demodulate') {
        this.setDatas2(val.data)
      }
      if (val.sendName === 'channel') {
        this.setDatas3(val.data)
      }
      if (val.sendName === 'modulate') {
        this.setDatas4(val.data)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()

      const erd = elementResizeDetectorMaker()
      erd.listenTo(this.$refs.out, (element) => {
        this.$nextTick(() => {
          // 监听到事件后执行的业务逻辑
          this.resize()
        })
      })
    })
  },
  methods: {
    resize() {
      if (myCharts1) {
        myCharts1.resize()
      }
      if (myCharts2) {
        myCharts2.resize()
      }
      if (myCharts3) {
        myCharts3.resize()
      }
      if (myCharts4) {
        myCharts4.resize()
      }
    },
    initChart() {
      myCharts1 = this.$echarts.init(this.$refs.pieCharts_1)
      myCharts2 = this.$echarts.init(this.$refs.pieCharts_2)
      myCharts3 = this.$echarts.init(this.$refs.pieCharts_3)
      myCharts4 = this.$echarts.init(this.$refs.pieCharts_4)
      this.setOptions1([], [])
      this.setOptions2([], [])
      this.setOptions3([], [])
      this.setOptions4([], [])
    },
    setOptions1() {
      if (!myCharts1) {
        return false
      }
      myCharts1.setOption({
        animation: true,
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {type: 'cross'},
          padding: [5, 10],
          textStyle: {
            fontSize: 14
          },
          zlevel: 3
        },
        title: {
          text: '信号产生',
          left: 'center',
          textStyle: {
            color: '#0694ce',
            fontStyle: 'normal',
            fontWeight: '600',
            fontFamily: 'sans-serif',
            fontSize: 18
          }
        },
        grid: {
          show: true,
          top: '35',
          left: '35',
          right: '25',
          bottom: '25',
          // containLabel: true,
          borderColor: '#0694ce',
          borderWidth: 2
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          minorTick: {show: true},
          axisTick: {show: false},
          axisLabel: {show: true, color: '#0694ce', fontSize: 14, showMaxLabel: true},
          axisLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0694ce',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          nameTextStyle: {color: '#fff', fontSize: 15},
          axisTick: {show: false},
          splitArea: {show: false},
          axisLabel: {show: true, color: '#0694ce', fontSize: 14, showMaxLabel: true},
          axisLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitLine: {
            show: true,
            lineStyle: {color: '#0694ce', type: 'dashed'}
          },
        },
        series: [
          {
            data: [],
            type: 'line',
            name: '信号产生',
            itemStyle: {normal: {color: '#0694ce'}}
          }
        ]
      })
    },
    setOptions2() {
      if (!myCharts2) {
        return false
      }
      myCharts2.setOption({
        animation: true,
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {type: 'cross'},
          padding: [5, 10],
          textStyle: {
            fontSize: 14
          }
        },
        title: {
          text: '信号解调',
          left: 'center',
          textStyle: {
            color: '#0694ce',
            fontStyle: 'normal',
            fontWeight: '600',
            fontFamily: 'sans-serif',
            fontSize: 18
          }
        },
        grid: {
          show: true,
          top: '35',
          left: '35',
          right: '25',
          bottom: '25',
          // containLabel: true,
          borderColor: '#0694ce',
          borderWidth: 2
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          minorTick: {show: true},
          axisTick: {show: false},
          axisLabel: {show: true, color: '#0694ce', fontSize: 14, showMaxLabel: true},
          axisLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitLine: {show: true, lineStyle: {color: '#0694ce', type: 'dashed'}}
        },
        yAxis: {
          type: 'value',
          name: '',
          nameTextStyle: {color: '#fff', fontSize: 15},
          axisTick: {show: false},
          splitArea: {show: false},
          axisLabel: {show: true, color: '#0694ce', fontSize: 14, showMaxLabel: true},
          axisLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitLine: {show: true, lineStyle: {color: '#0694ce', type: 'dashed'}},
        },
        series: [
          {
            data: [],
            type: 'line',
            name: '信号解调',
            itemStyle: {normal: {color: '#0694ce'}}
          }
        ]
      })
    },
    setOptions3() {
      if (!myCharts3) {
        return false
      }
      myCharts3.setOption({
        animation: true,
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {type: 'cross'},
          padding: [5, 10],
          textStyle: {
            fontSize: 14
          }
        },
        title: {
          text: '信号通过信道',
          left: 'center',
          textStyle: {
            color: '#0694ce',
            fontStyle: 'normal',
            fontWeight: '600',
            fontFamily: 'sans-serif',
            fontSize: 18
          }
        },
        grid: {
          show: true,
          top: '35',
          left: '35',
          right: '25',
          bottom: '25',
          // containLabel: true,
          borderColor: '#0694ce',
          borderWidth: 2
        },
        xAxis: {
          boundaryGap: true,
          minorTick: {show: true},
          axisTick: {show: false},
          axisLabel: {show: true, color: '#0694ce', fontSize: 14, showMaxLabel: true},
          axisLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0694ce',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '',
          nameTextStyle: {color: '#fff', fontSize: 15},
          axisTick: {show: false},
          splitArea: {show: false},
          axisLabel: {show: true, color: '#0694ce', fontSize: 14, showMaxLabel: true},
          axisLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitLine: {
            show: true,
            lineStyle: {color: '#0694ce', type: 'dashed'}
          },
        },
        series: [
          {
            type: 'scatter',
            encode: {tooltip: [0, 1]},
            name: '信号通过信道',
            itemStyle: {
              borderColor: '#555',
              normal: {
                color: function (params) {
                  // 不同区域，显示不同颜色
                  let c = params.data;
                  if (c[0] > 0 && c[1] > 0) {
                    return "#FE8463";
                  } else if (c[0] > 0 && c[1] < 0) {
                    return "#07ceac";
                  } else if (c[0] < 0 && c[1] < 0) {
                    return "#9BCA63";
                  } else if (c[0] < 0 && c[1] > 0) {
                    return "#ff9d9b";
                  }
                  return "#ff9d9b";
                }
              }
            }
          }
        ]
      })
    },
    setOptions4() {
      if (!myCharts4) {
        return false
      }
      myCharts4.setOption({
        animation: true,
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {type: 'cross'},
          padding: [5, 10],
          textStyle: {
            fontSize: 14
          }
        },
        title: {
          text: '信号调制',
          left: 'center',
          textStyle: {
            color: '#0694ce',
            fontStyle: 'normal',
            fontWeight: '600',
            fontFamily: 'sans-serif',
            fontSize: 18
          }
        },
        grid: {
          show: true,
          top: '35',
          left: '35',
          right: '25',
          bottom: '25',
          // containLabel: true,
          borderColor: '#0694ce',
          borderWidth: 2
        },
        xAxis: {
          boundaryGap: true,
          minorTick: {show: true},
          axisTick: {show: false},
          axisLabel: {show: true, color: '#0694ce', fontSize: 14, showMaxLabel: true},
          axisLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitLine: {show: true, lineStyle: {color: '#0694ce', type: 'dashed'}},
        },
        yAxis: {
          name: '',
          nameTextStyle: {color: '#fff', fontSize: 15},
          axisTick: {show: false},
          splitArea: {show: false},
          axisLabel: {show: true, color: '#0694ce', fontSize: 14, showMaxLabel: true},
          axisLine: {show: true, lineStyle: {color: '#0694ce'}},
          splitLine: {show: true, lineStyle: {color: '#0694ce', type: 'dashed'}},
        },
        series: [
          {
            type: 'scatter',
            encode: {tooltip: [0, 1]},
            name: '信号调制',
            itemStyle: {
              borderColor: '#555',
              normal: {
                color: function (params) {
                  // 不同区域，显示不同颜色
                  let c = params.data;
                  if (c[0] > 0 && c[1] > 0) {
                    return "#FE8463";
                  } else if (c[0] > 0 && c[1] < 0) {
                    return "#07ceac";
                  } else if (c[0] < 0 && c[1] < 0) {
                    return "#9BCA63";
                  } else if (c[0] < 0 && c[1] > 0) {
                    return "#ff9d9b";
                  }
                  return "#ff9d9b";
                }
              }
            }
          }
        ]
      })
    },

    setDatas1(datas1) {
      if (!myCharts1) {
        return false
      }
      myCharts1.setOption({
        xAxis: {
          data: datas1.map((item, index) => {
            return index + 1
          })
        },
        series: [{data: datas1}]
      })
    },
    setDatas2(datas1) {
      if (!myCharts2) {
        return false
      }
      myCharts2.setOption({
        xAxis: {
          data: datas1.map((item, index) => {
            return index + 1
          })
        },
        series: [{data: datas1}]
      })
    },
    setDatas3(datas1) {
      if (!myCharts3) {
        return false
      }
      myCharts3.setOption({
        series: [
          {
            data: datas1.map(item => {
              return [item.Ipart, item.Rpart]
            })
          }
        ]
      })
    },
    setDatas4(datas1) {
      if (!myCharts4) {
        return false
      }
      myCharts4.setOption({
        dataset: [
          {
            source: datas1.map(item => {
              return [item.Ipart, item.Rpart]
            })
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .chart-group {
    width: 100%;
    height: 400px;
    display: flex;
    flex-wrap: wrap;

    .qpsk-item {
      width: 50%;
      height: 50%;
      padding: 5px;

      .qpsk-item-group {
        height: 100%;
        width: 100%;
        border: solid 1px #0694ce;
        padding: 5px 0;
      }

      &:nth-child(1) {
        /*border-right: solid 3px #0694ce;*/
        /*border-bottom: solid 3px #0694ce;*/
      }

      &:nth-child(2) {
        /*border-bottom: solid 3px #0694ce;*/
      }

      &:nth-child(3) {
        /*border-right: solid 3px #0694ce;*/
      }
    }

  }

  .chart-box {
    height: 100%;
    position: relative;
  }
</style>
